﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link href="../../bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../bootstrap/js/bootstrap.min.js"></script>


<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
	<script src="/js/vue.js"></script>
	<script src="/js/axios.min.js"></script>
	<script src="/element-ui/lib/index.js"></script>
	<link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
<script type="text/javascript">
	$(function(){
		$("#isCreateTransaction").click(function(){
			if(this.checked){
				$("#create-transaction2").show(200);
			}else{
				$("#create-transaction2").hide(200);
			}
		});
	});
</script>

</head>
<body>
<div id="app">
	<div id="title" class="page-header" style="position: relative; left: 20px;">
		<h4>转换线索 <small>{{clue.fullName}}{{clue.appelication}}-{{clue.company}}</small></h4>
	</div>
	<div id="create-customer" style="position: relative; left: 40px; height: 35px;">
		新建客户：{{clue.company}}
	</div>
	<div id="create-contact" style="position: relative; left: 40px; height: 35px;">
		新建联系人：{{clue.fullName}}{{clue.appelication}}
	</div>
	<div id="create-transaction1" style="position: relative; left: 40px; height: 35px; top: 25px;">
		<input type="checkbox" id="isCreateTransaction"/>
		为客户创建交易
	</div>
	<div id="create-transaction2" style="position: relative; left: 40px; top: 20px; width: 80%; background-color: #F7F7F7; display: none;" >
	
		<form>
		  <div class="form-group" style="width: 400px; position: relative; left: 20px;">
		    <label for="amountOfMoney">金额</label>
		    <input type="text" v-model="tran.money" class="form-control" id="amountOfMoney">
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="tradeName">交易名称</label>
		    <input type="text" v-model="tran.name" class="form-control" id="tradeName" value="动力节点-">
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label>预计成交日期</label>
			  <el-date-picker
					  v-model="tran.expectedDate"
					  type="date"
					  value-format="yyyy-MM-dd"
					  placeholder="选择日期">
			  </el-date-picker>
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label>阶段</label>
			  <el-select v-model="tran.stage" placeholder="请选择交易阶段">
				  <el-option v-for="item in stages" :label="item.text" :value="item.value"></el-option>
			  </el-select>
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="activity" @click="dialogTableVisible=true">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);"  style="text-decoration: none;"><span class="glyphicon glyphicon-search"></span></a></label>
		    <input type="text" v-model="activityName" class="form-control" id="activity" placeholder="点击上面搜索" readonly>
		  </div>
		</form>
		
	</div>
	
	<div id="owner" style="position: relative; left: 40px; height: 35px; top: 50px;">
		记录的所有者：<br>
		<b>{{clue.ownerName}}</b>
	</div>
	<div id="operation" style="position: relative; left: 40px; height: 35px; top: 100px;">
		<input class="btn btn-primary" @click="convert" type="button" value="转换">
		&nbsp;&nbsp;&nbsp;&nbsp;
		<input class="btn btn-default" type="button" value="取消">
	</div>
<!--市场活动列表的弹框-->
	<el-dialog title="市场活动" :visible.sync="dialogTableVisible">
		<el-form :inline="true"  class="demo-form-inline">
			<el-form-item label="活动名称">
				<el-input v-model="search.name" placeholder="活动名称"></el-input>
			</el-form-item>
			<el-form-item label="拥有者">
				<el-select v-model="search.owner" placeholder="拥有者">
					<el-option label="--请选择--" value=""></el-option>
					<el-option v-for="item in users" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="开始日期">
				<el-date-picker
						v-model="search.startDate"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择开始日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="结束日期">
				<el-date-picker
						v-model="search.endDate"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getAllActivity">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table
				:data="activitys"
				border
				style="width: 100%"
				@current-change="chooseOne"
				style="width: 100%">
			<el-table-column
					type="index"
					width="50">
				<template slot-scope="scope">
					<el-radio v-model="tran.activityId" :label="scope.row.id">{{""}}</el-radio>
				</template>
			</el-table-column>
			<el-table-column
					prop="name"
					label="活动名称"
					width="150">
			</el-table-column>
			<el-table-column
					prop="ownerUser.name"
					label="拥有者"
					width="120">
			</el-table-column>
			<el-table-column
					prop="startDate"
					label="开始日期"
					width="120">
			</el-table-column>
			<el-table-column
					prop="endDate"
					label="结束日期"
					width="120">
			</el-table-column>
		</el-table>
		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageNum"
				:page-sizes="[5, 10, 15, 20]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
		</el-pagination>
		<div>
			<el-button type="success" @click="chooseActivity">确定</el-button>
		</div>
	</el-dialog>
</div>
<script>
	 new Vue({
		 el:"#app",
		 data:{
			 clue:{},
			 tran:{//交易
				 money:undefined,
				 name:undefined,
				 expectedDate:undefined,
				 stage:undefined,
				 activityId:undefined
			 },
			 stages:[],//所有交易阶段
			 activitys:[],
			 pageNum:1,
			 pageSize:5,
			 total:undefined,
			 dialogTableVisible:false,
			 search:{//搜索条件
				 name:undefined,
				 owner:undefined,
				 startDate:undefined,
				 endDate:undefined
			 },
			 activityName:undefined,
		 },
		 methods:{
			 convert(){//确定转换
                axios.post(`/clue/convert?clueId=${this.clue.clueId}&createTran=${$("#isCreateTransaction").prop("checked")}&createBy=${JSON.parse(sessionStorage.getItem("user")).id}`,
						this.tran).then(resp=>{
						let data=resp.data;
						if (data.code==200){
							this.$message({
								type:"success",
								message:"转换成功"
							});
						}
				})
			 },
			 chooseActivity(){//点击确定选中市场活动
				this.dialogTableVisible=false
			 },
			 chooseOne(val) {//单选的点击事件
				 console.log(val);
				 this.tran.activityId=val.id
				 this.activityName=val.name;
				 // this.dialogTableVisible=false
			 },
			 initData(){//获取上一页面传递的线索信息
				 let str=sessionStorage.getItem("clue");
				 this.clue=JSON.parse(str);
			 },
			 getAllStage(){//获取所有的阶段
				 axios.get("/value/getDicValueByCode?code=tran_stage")
				 .then(resp=>{
					 this.stages=resp.data.result
				 })
			 },
			 getAllActivity(){//获取表格数据
				 axios.get("/activity",{params:{
						 pageNum:this.pageNum,
						 pageSize: this.pageSize,
						 ...this.search
					 }}).then(resp=>{
					 let data=resp.data;
					 this.activitys=data.result;
					 this.total=data.count
				 })
			 },
			 handleSizeChange(val) {
				 console.log(`每页 ${val} 条`);
				 this.pageSize=val;
				 this.getAllActivity();
			 },
			 handleCurrentChange(val) {
				 console.log(`当前页: ${val}`);
				 this.pageNum=val;
				 this.getAllActivity();
			 }
		 },
		 created(){
			 this.initData();
			 this.getAllStage()//获取所有的阶段
			 this.getAllActivity()//获取所有的市场活动
		 }
	 })
</script>
</body>
</html>